﻿
@{
    ViewBag.Title = "人员管理";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<link rel="stylesheet" href="~/Content/css/frozenui.css">
<link rel="stylesheet" href="~/Content/css/style.css">
<link rel="stylesheet" href="~/Content/css/swiper.min.css">
@*<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>*@
<script src="~/Content/script/swiper.min.js"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        position: relative;
        height: 100%;
    }

    li, a {
        list-style: none;
        text-decoration: none;
    }

    .swiper-container {
        width: 100%;
    }

    #nav {
        background: #fff;
    }

        #nav .swiper-wrapper {
            height: 1.68rem;
            box-sizing: border-box;
            margin: 0;
            line-height: 1.6rem;
            border-bottom: 2px solid #dfe0e1;
        }

        #nav li {
            text-align: center;
            color: #424242;
            font-size: 0.63rem;
        }

            #nav li span {
                color: #3597D9;
            }

        #nav .active-nav {
            color: #2ECA70;
            border-bottom: 2px solid #2ECA70;
        }

            #nav .active-nav span {
                color: #2ECA70;
            }

    #page {
        position: absolute;
        top: 1.7rem;
        left: 0;
        right: 0;
        bottom: 2.2rem;
        overflow: hidden;
    }

        #page .swiper-slide {
            text-align: center;
            font-size: 30px;
            overflow-y: scroll;
            position: relative;
        }

        #page .list li {
            padding: 15px 8px 15px;
            border-bottom: 1px solid #d4d4d4;
            box-sizing: border-box;
        }

            #page .list li a {
                display: block;
            }

            #page .list li div {
                display: flex;
                justify-content: space-between;
            }

                #page .list li div h3 {
                    color: #000;
                    font-size: 0.7rem;
                }

                #page .list li div h4 {
                    flex: 0 25%;
                    font-size: 0.7rem;
                    color: #3597D9;
                }

        #page .list li {
            background: #fff;
        }

            #page .list li p {
                text-align: left;
                font-size: 0.5rem;
                color: #777;
                line-height: 1rem;
            }

    #seacher {
        display: flex;
        justify-content: space-between;
        padding: 6px 8px;
        background: #E9EDF0;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #seacher input {
            margin-right: 10px;
            width: 80%;
            background: #fff;
            border: none;
            border-radius: 5px;
            outline: none;
            box-sizing: border-box;
            padding: 0 10px;
            text-align: center;
            font-size: 0.6rem;
            height: 1.32rem;
        }

        #seacher button {
            width: 20%;
            border-radius: 4.96px;
            border: none;
            background: #2ECA70;
            color: #fff;
            outline: none;
            line-height: 1.32rem;
            font-size: 0.6rem;
            height: 1.32rem;
        }

            #seacher button img {
                width: 0.7rem;
                vertical-align: text-top;
                display: inline;
            }

    #timeRadio {
        display: flex;
        padding: 2px 6px;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #timeRadio .ui-radio {
            margin-right: 0.72rem;
            line-height: 1.32rem;
            font-size: 0.65rem;
            color: #424242;
            font-weight: bold;
        }

            #timeRadio .ui-radio input {
                width: 1rem;
                height: 1rem;
                /*top: -2px;
                margin-right: 5px;*/
                top: -0.1rem;
                margin-right: 0.1rem;
            }

                #timeRadio .ui-radio input:before {
                    width: 0.9rem;
                    height: 0.9rem;
                    background: #fff;
                    left: 0.05rem;
                    top: 0.05rem;
                    border-radius: 0.5rem;
                }

                #timeRadio .ui-radio input:checked:after {
                    width: 0.5rem;
                    height: 0.5rem;
                    background: #2ECA70;
                    border: 1px solid #2ECA70;
                    border-radius: 0.4rem;
                    left: 0.25rem;
                    top: 0.25rem;
                }

    #footer {
        /*position: absolute;
            height: 1.6rem;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            margin: 0;
            background-color: #00bcd4;*/
        position: absolute;
        height: 1.6rem;
        left: 0;
        right: 0;
        bottom: 2rem;
        padding: 0;
        margin: 0;
        background-color: #00bcd4;
        z-index: 999;
    }

        #footer .ui-btn-primary {
            height: 1.6rem;
            width: 100%;
            line-height: 1.6rem;
            font-size: 0.68rem;
        }
</style>
@*</head>
    <body>*@
<div id="seacher">
    <input id="Msg" type="text" placeholder="请输入人员名称查询">
    <button id="Search"><img src="~/Content/image/search (1).png" alt="Alternate Text" />&nbsp;搜索</button>
</div>
@*<div id="timeRadio">

        <label class="ui-radio" for="radio">
            <input type="radio" id="allGen" name="radio" value="0" />全部
        </label>
        <label class="ui-radio" for="radio">
            <input type="radio" id="inGen" checked="" name="radio" value="1" />发电
        </label>
        <label class="ui-radio" for="radio">
            <input type="radio" id="standGen" name="radio" value="5" />待用
        </label>
        <label class="ui-radio" for="radio">
            <input type="radio" id="fixGen" name="radio" value="3" />维修
        </label>
        <label style="line-height:28px;float:right;color:#808080;font-size:10px">
            <span id="genListCount">共0条</span>
        </label>
    </div>*@
@*<div id="nav" class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide active-nav">待接单(<span id="noExtTotal">0</span>)</li>
            <li class="swiper-slide ">执行中(<span id="exingTotal">0</span>)</li>
            <li class="swiper-slide">已结单(<span id="completelyTotal">0</span>)</li>
            <li class="swiper-slide">已审核(<span id="audiuTotal">0</span>)</li>
        </ul>
    </div>*@
<div class="swiper-container" id="page">
    <div class="swiper-wrapper">
        <div class="swiper-slide slidepage">
            <ul class="list" id="personList">
                @*<li>
                        <a href="/Generator/Detail?dtuid=1111">
                            <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                                <img style="width:100%;height:100%" src="~/Content/image/person.png" />
                            </div>
                            <div><h3>油机1001</h3></div>
                            <p><span style="color:gray;margin-right:15px">电话：163464967949</span><span style="float:right ">子系统管理员</span></p>
                        </a>
                    </li>*@
            </ul>
        </div>
        @*<div class="swiper-slide slidepage">
                    <ul class="list" id="exeing"></ul>
                </div>
                <div class="swiper-slide slidepage">
                    <ul class="list" id="completely"></ul>
                </div>
                <div class="swiper-slide slidepage">
                    <ul class="list" id="audiu"></ul>
                </div>
            </div>*@
    </div>
</div>

@*<section class="ui-container actionOne">
        <section id="actionsheet">
            <div class="demo-item">
                <div class="demo-block">
                    <div class="ui-actionsheet" id="actionsheet1">
                        <div class="ui-actionsheet-cnt am-actionsheet-down">
                            <h4>选择操作菜单</h4>
                            <button id="addGen">添加油机</button>
                            <button id="returnList">刷新列表</button>
                            <div class="ui-actionsheet-split-line"></div>
                            <button id="cancel">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>*@

@*<div class="ui-btn-wrap" id="footer">
        <button class="ui-btn-primary">
            操作
        </button>
    </div>*@
<script>
    var UserName = "";
    getPerson(UserName);//初始化
    (function (designWidth, maxWidth) {
        var html = document.getElementsByTagName("html")[0];
        var tid;
        function refreshRem() {
            var width = html.getBoundingClientRect().width;
            console.log(width / 15)
            html.style.fontSize = width / 15 + "px"
        }
        window.addEventListener("resize", function () {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
        refreshRem();
    })();

    //工单状态tap点击事件
    (function (doc, win) {
        var size = 10;
        //var myNav = new Swiper('#nav', {
        //    spaceBetween: 10,
        //    slidesPerView: 4,
        //    watchSlidesProgress: true,
        //    watchSlidesVisibility: true,
        //    on: {
        //        tap: function () {
        //            menuIndex = myNav.clickedIndex;
        //            myPage.slideTo(myNav.clickedIndex);
        //        }
        //    }
        //});

        ////工单状态滑动事件
        //var myPage = new Swiper('#page', {
        //    on: {
        //        slideChangeTransitionStart: function () {
        //            updateNavPosition()
        //        }
        //    }
        //});

        //工单状态滑动方法
        function updateNavPosition() {
            $('#nav .active-nav').removeClass('active-nav');
            var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
            menuIndex = activeNav.index();
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() >= myNav.activeIndex) {
                    var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                    myNav.slideTo(activeNav.index() - thumbsPerNav)
                } else {
                    myNav.slideTo(activeNav.index())
                }
            }
        }

    })(document, window);



    var datalist = "";
    var genListCount = 0;//统计
    //油机统计方法
    function getPerson(UserName) {
        //ajax参数
        var paramdata = {
            UserName: UserName
        };
        $.ajax({
            url: '/api/Info/GetPerson',
            type: 'get',
            data: paramdata,
            beforeSend: function () {
                openLoading();
            },
            error: function (data) {
                closeLoading();
                console.log(JSON.stringify(data));
            },
            success: function (data) {
                closeLoading();
                $("#personList").html("");
                //var result = JSON.parse(data);
                var result = data.Data;
                if (result.Code == 0 || result.Result.length == 0) {
                    datalist = noRecordTxt;
                } else {
                    result.Result.forEach(function (d, i) {
                        datalist += "<li><a href='tel:" + d.UserPhone + "'><div style='float:left;width: 55px;height: 55px;margin-right:16px'><img style='width:100%;height:100%' src='/Content/image/person.png' /></div><div><h3>" + d.UserName + "</h3></div><p><span style='color:gray;margin-right:15px'>电话：" + d.UserPhone + "</span><span style='float:right '>" + d.PersonClass + "</span></p></a></li>"
                    })
                }
                $("#personList").html(datalist);
                datalist = "";
            }
        })
    }



    //搜索
    $("#Search").click(function () {
        UserName = $("#Msg").val().trim();
        if (Msg == "") {
            alert("请输入人员名称");
            return;
        }
        getPerson(UserName);
        UserName = "";
    })
</script>

